@import "../../assets/base.scss";

.task-model {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 750rpx;
  padding: 20rpx 0;
  color: $titleColor;
  background-color: #fff;
  border-bottom: 1rpx solid $borderColor;
  &:last-child {
    border-bottom: 0;
  }
  &:active{
    background: #f5f5f5;
  }
  image {
    display: block;
    width: 120rpx;
    height: 120rpx;
    border: 1rpx solid $borderColor;
    box-sizing: border-box;
  }
  .model-info {
    width: 570rpx;
    .info-title {
      width: 100%;
      font-size: $subTitleSize;
      @extend .singleLine;
      .mark {
        display: inline-block;
        padding: 2rpx 8rpx;
        box-sizing: border-box;
        border: 1rpx solid $borderColor;
        vertical-align: bottom;
        margin-left: 8rpx;
        font-size: 22rpx;
      }
      .best{
        border: 1rpx solid $themeColor;
        color: $themeColor;
      }
    }
    .tags {
      display: flex;
      align-items: center;
      width: 570rpx;
      margin-top: 10rpx;
      font-size: $infoSize;
      .left {
        width: 50%;
        @extend .singleLine;
        text {
          display: inline-block;
          padding: 0 6rpx;
          height: 32rpx;
          line-height: 32rpx;
          background: #f5f5f5;
          margin-left: 8rpx;
        }
      }
      .right {
        width: 50%;
        text-align: right;
        font-size: 19rpx;
      }
    }
    .sort {
      display: flex;
      align-items: center;
      width: 570rpx;
      margin-top: 10rpx;
      font-size: 22rpx;
      .left {
        width: 50%;
        padding-left: 8rpx;
      }
      .right {
        width: 50%;
        text-align: right;
      }
    }
  }
}
